<template>
  <view :data-theme="theme">
    <view class="PromoterRank">
      <view class="redBg">
        <view class="header">
          <view class="nav acea-row row-center-wrapper">
            <view class="item" :class="active == index ? 'font-color' : ''" v-for="(item,index) in navList"
                  :key="index" @click="switchTap(index)">
              {{ item }}
            </view>
          </view>
          <view class="rank acea-row row-bottom row-around">
            <view class="item" v-show="Two.id">
              <view class="pictrue">
                <image :src="Two.avatar"></image>
              </view>
              <view class="name line1">{{ Two.nickname }}</view>
              <view class="num">{{ Two.spreadCount }}人</view>
            </view>
            <view class="item" v-show="One.id">
              <view class="pictrue">
                <image :src="One.avatar"></image>
              </view>
              <view class="name line1">{{ One.nickname }}</view>
              <view class="num">{{ One.spreadCount }}人</view>
            </view>
            <view class="item" v-show="Three.id">
              <view class="pictrue">
                <image :src="Three.avatar"></image>
              </view>
              <view class="name line1">{{ Three.nickname }}</view>
              <view class="num">{{ Three.spreadCount }}人</view>
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <view v-if="rankList.length">
          <view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key="index">
            <view class="num">{{ index + 4 }}</view>
            <view class="picTxt acea-row row-between-wrapper">
              <view class="pictrue">
                <image :src="item.avatar"></image>
              </view>
              <view class="text line1">{{ item.nickname }}</view>
            </view>
            <view class="people font-color">{{ item.spreadCount }}人</view>
          </view>
        </view>
        <view class='noCart' v-if="list.length == 0 && isShow && !loading">
          <view class='pictrue'>
            <image :src="urlDomain+'crmebimage/presets/noJilu.png'"></image>
            <view class="default_txt">暂无排行榜哦~</view>
          </view>
        </view>
      </view>
      <view class='loadingicon acea-row row-center-wrapper'>
        <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getRankList
} from '@/api/user.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
import {
  setThemeColor
} from '@/utils/setTheme.js'

const app = getApp();
export default {
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      navList: ["周榜", "月榜"],
      active: 0,
      type: 'week',
      loading: false,
      loadend: false,
      rankList: [],
      Two: {},
      One: {},
      Three: {},
      theme: app.globalData.theme,
      bgColor: '#8B4513',
      isShow: false,
      list: []
    };
  },
  computed: mapGetters(['isLogin']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getRanklist();
        }
      },
      deep: true
    }
  },
  onLoad() {
    if (this.isLogin) {
      this.getRanklist();
    } else {
      toLogin();
    }
    let that = this;
    that.bgColor = setThemeColor();
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: that.bgColor,
    });
  },

  methods: {
    getRanklist: function () {
      let that = this;
      if (that.loadend) return;
      if (that.loading) return;
      that.loading = true;
      getRankList({
        type: that.type
      }).then(res => {
        this.list = res.data;
        let data = res.data;
        that.One = data[0] || {};
        that.Two = data[1] || {};
        that.Three = data[2] || {};
        let list = data.filter((v, i) => {
          return i > 2
        });
        that.$set(that, 'rankList', list);
        that.loading = false;
        that.isShow = true;
      }).catch(err => {
        that.loading = false;
      })
    },

    switchTap: function (index) {
      if (this.active === index) return;
      this.active = index;
      // week
      this.type = index ? 'month' : 'week';
      this.$set(this, 'rankList', []);
      this.Two = {};
      this.One = {};
      this.Three = {};
      this.getRanklist();
    },
  },
  onReachBottom: function () {
    this.getRanklist();
  }
}
</script>

<style scoped lang="scss">
.PromoterRank .redBg {
  padding: 45rpx 0 30rpx 0;
  @include main_bg_color(theme);
}

.font_color {
  @include main_color(theme);
}

.PromoterRank .header {
  background: url("") no-repeat;
  width: 100%;
  height: 460rpx;
  background-size: 100% 218rpx;
  background-position: center bottom;
}

.PromoterRank .header .nav {
  width: 456rpx;
  height: 66rpx;
  border: 1px solid #fff;
  border-radius: 33rpx;
  font-size: 30rpx;
  color: #fff;
  margin: 0 auto;
}

.PromoterRank .header .nav .item {
  width: 223rpx;
  height: 100%;
  text-align: center;
  line-height: 60rpx;
}

.PromoterRank .header .nav .item.font-color {
  @include main_color(theme);
  width: 230rpx;
}

.PromoterRank .header .nav .item.font-color:nth-of-type(1) {
  background-color: #fff;
  border-radius: 33rpx 0 0 33rpx;
}

.PromoterRank .header .nav .item.font-color:nth-of-type(2) {
  background-color: #fff;
  border-radius: 0 33rpx 33rpx 0;
}

.PromoterRank .header .rank {
  padding: 0 20rpx;
  margin-top: 30rpx;
}

.PromoterRank .header .rank .item .pictrue {
  background: url("") no-repeat;
  background-size: 100% 100%;
  width: 136rpx;
  height: 177rpx;
  position: relative;
  margin: 0 auto;
}

.PromoterRank .header .rank .item .pictrue image {
  position: absolute;
  width: 130rpx;
  height: 130rpx;
  display: block;
  bottom: 2rpx;
  border-radius: 50%;
  left: 50%;
  margin-left: -65rpx;
}

.PromoterRank .header .rank .item:nth-of-type(2) .pictrue {
  background-image: url("");
  width: 156rpx;
  height: 205rpx;
}

.PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
  width: 150rpx;
  height: 150rpx;
  margin-left: -75rpx;
}

.PromoterRank .header .rank .item:nth-of-type(3) .pictrue {
  background-image: url("");
}

.PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
  margin-left: -64rpx;
}

.PromoterRank .header .rank .item .name {
  font-size: 30rpx;
  color: #fff;
  margin-top: 22rpx;
  text-align: center;
  width: 170rpx;
}

.PromoterRank .header .rank .item .num {
  font-size: 30rpx;
  color: #fff;
  text-align: center;
}

.PromoterRank .list {
  width: 710rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin: -60rpx auto 0 auto;
  padding: 0 30rpx;
}

.PromoterRank .list .item {
  border-bottom: 1px solid #f3f3f3;
  height: 101rpx;
  font-size: 28rpx;
}

.PromoterRank .list .item .num {
  color: #666;
  width: 70rpx;
}

.PromoterRank .list .item .picTxt {
  width: 350rpx;
}

.PromoterRank .list .item .picTxt .pictrue {
  width: 68rpx;
  height: 68rpx;
}

.PromoterRank .list .item .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.PromoterRank .list .item .picTxt .text {
  width: 262rpx;
  color: #333;
}

.PromoterRank .list .item .people {
  width: 175rpx;
  text-align: right;
}

.noCart {
  margin-top: -62rpx;
  padding-top: 0.1rpx;
  height: 800rpx;
}

.noCart .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
  width: 100%;
  height: 100%;
}

.default_txt {
  font-size: 26rpx;
  color: #999;
  text-align: center;
}
</style>
